<template>
  <view class="goods-item" :class="{active:mode==='文字','disabled':stock===0||sale_state==='售罄'||stock<=amount}">
    <view class="badge inner" v-if="sale_state==='售罄'">
      售罄
    </view>
    <view class="badge inner" v-else-if="stock===0||stock<=amount">
      库存不足
    </view>
    <view class="badge" v-else-if="amount">
      {{amount||''}}
    </view>
    <view class="flex" v-if="mode==='图文'">
      <image :src="imgUrl" mode="aspectFill" class="goods-item-image " v-if="imgUrl">

      </image>
      <!-- 	<view class="goods-item-image" v-if="imgUrl">
				<u--image :src="imgUrl" width="100%" height="100%"></u--image>
			</view> -->
      <view class="goods-item-image  bg-white" v-else>
        <!-- <u-empty mode="page"></u-empty> -->
        <view class="flex align-center justify-center full-height">
          暂无图片
        </view>
      </view>
      <!--   <image src="/static/images/no-img.png" mode="aspectFill" class="goods-item-image" v-else>
      </image> -->
    </view>
    <view class="goods-item-image" v-else>
      <text class="text"> {{name||'-'}}</text>
    </view>
    <view class="goods-item-info">
      <view class="goods-item-name" v-if="mode==='图文'">
        {{name||'-'}}
      </view>
      <view class="goods-item-price">
        <view class="price">
          ￥{{price||'0'}}
        </view>
        <view class="stock">
          库存：
          <text v-if="is_temporary_goods===true">无限</text>
          <text v-else> {{stock||'0'}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  /**
   * @property {String} imgUrl 图片路径
   * @property {String} name 商品名称
   * @property {String||Number} price 商品价格
   * @property {String} stock 库存数量
   * @property {Number} amount 购物车数量
   * @property {String} mode 显示模式  - 图文； - 文字
   */
  export default {
    name: "goodsItem",
    props: {
      sale_state: {
        type: String,
        default: ''
      },
      imgUrl: {
        type: String,
        default: ''
      },
      name: {
        type: String,
        default: ''
      },
      price: {
        type: [String, Number],
        default: ''
      },
      stock: {
        type: [String, Number],
        default: ''
      },
      amount: {
        type: [String, Number],
        default: 0
      },
      mode: {
        type: String,
        default: '图文'
      },
      is_temporary_goods: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      getPrice(e) {
        let price = Number(this.price)
        if (!isNaN(price)) {
          if (price > 10000) {
            return `${parseInt(price/10000)}.${parseInt(price%10000).toFixed(0)}万`
          }
        } else {
          return '0'
        }
      }
    },
  }
</script>

<style scoped lang="scss">
  .goods-item {
    // width: 100%;
    min-height: 21rem;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 1rem 1rem 0 0;
    border-radius: 1rem;

    .badge {
      display: inline-block;
      font-size: 2rem;
      position: absolute;
      right: 0;
      top: 0;
      min-width: 3rem;
      height: 3rem;
      line-height: 3rem;
      text-align: center;
      background-color: #FF5733;
      // transform: translateX(20%);
      border-radius: 3rem;
      z-index: 2;
      color: #fff;

      &.inner {
        background-color: transparent;
        left: 40%;
        top: 15%;
        font-size: 3rem;
        color: #ccc;
        transform: rotate(-30deg) translateX(-50%);
      }
    }

    &.add {
      font-size: $retail-font-size-sm;
    }

    .goods-item-image {
      width: 100%;
      height: 11.5rem;
      overflow: hidden;
      border-radius: 1rem 1rem 0 0;

      .full-height {
        height: 100%;
        transform: rotate(315deg);
        color: #eee;
        font-size: 3rem;
      }

      &.border {
        border: 1px solid #E5E5E5;
      }
    }

    .goods-item-name {
      color: #28322B;
      font-size: 2rem;
      line-height: 3rem;
      font-weight: 700;
      @include textOverflow(100%, 1);
    }

    .goods-item-info {
      flex: 1;
      padding: .8rem 1.6rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid #E5E5E5;
      border-radius: 0 0 1rem 1rem;
      background-color: #fff;
      overflow: hidden;
    }

    .goods-item-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;

      .price {
        font-size: $retail-font-size-sm;
        color: #FF5733;
        font-weight: 700;
      }

      .stock {
        color: #28322B;
        font-size: $retail-font-size-xs;
      }
    }

    &.active {
      overflow: hidden;

      .goods-item-image {
        color: #fff;
        font-weight: bold;
        font-size: 2.4rem;
        padding: 2rem;
        background-color: $retail-color-primary;
        line-height: 3.4rem;
        width: 100%;

        .text {
          width: 100%;
          // height: 100%;
          display: inline-block;
          @include textOverflow(100%, 2);
          word-break: break-all;
        }
      }

      .goods-item-info {
        // background-color: $retail-color-primary;
        // border-color: $retail-color-primary;
        // padding: 2.2rem 2.7rem;
        align-items: center;
        flex-direction: row;
        font-size: $retail-font-size-sm;
      }

      .goods-item-name {
        // color: #fff;
        font-size: $retail-font-size-sm;
        font-weight: 700;
        // height: 12rem;
        overflow: hidden;
        white-space: normal;
        text-overflow: inherit;
        @include textOverflow(100%, 4);
      }

      .goods-item-price {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .price,
        .stock {
          // color: #fff;
        }
      }
    }
  }
</style>
